<template>
  <div class="ranking">
    <div class="label">
      <el-button-group>
        <el-button size="medium" :type="type === 'program' ? 'info' : '' " @click="typeChange('program')">节目榜</el-button>
        <el-button size="medium" :type="type === 'new' ? 'info' : '' " @click="typeChange('new')">新晋电台帮</el-button>
        <el-button size="medium" :type="type === 'hot' ? 'info' : '' " @click="typeChange('hot')">热门电台帮</el-button>
      </el-button-group>
      <span class="updateTime">最近更新：{{ updateTime | showDate }}</span>
    </div>
    <el-table :data="rankinglist" style="width: 100%" stripe fit lazy @row-dblclick="playMuaic">
      <el-table-column style="text-align: center;" width="60">
        <template slot-scope="scope">
          <span class="ranknum">{{ scope.row.rank }}</span>
          <span class="rank" v-if="scope.row.lastRank <= 0"><i class="iconfont icon-new" style="color: #089c19; font-size: 18px;"></i></span>
          <span class="rank" v-else-if="(scope.row.lastRank - scope.row.rank) > 0"><i class="iconfont icon-iconup" style="color: #cd2929;"></i>{{ scope.row.lastRank - scope.row.rank }}</span>
          <span class="rank" v-else-if="(scope.row.lastRank - scope.row.rank) < 0"><i class="iconfont icon-icondown" style="color: #2875ce;"></i>{{ scope.row.rank - scope.row.lastRank }}</span>
          <span class="rank" v-else-if="(scope.row.lastRank - scope.row.rank) === 0">-{{ scope.row.rank - scope.row.lastRank }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <div class="left">
            <div class="img">
              <img :src=" type === 'program' ? scope.row.program.coverUrl : scope.row.picUrl" />
              <i class="iconfont icon-playcircle"></i>
            </div>
            <span class="name">{{ type === 'program' ? scope.row.program.name : scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span class="name">{{ type === 'program' ? scope.row.program.radio.name : scope.row.creatorName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100">
        <template slot-scope="scope">
          <el-tag type="info" effect="plain" size="medium">{{ type === 'program' ? scope.row.program.radio.category : scope.row.category }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getProgramRankingList, getNewOrHotRankingList } from '../../../network/dj.js'
import { formatTime } from '../../common/util.js'
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
export default {
  data () {
    return {
      id: 0,
      type: 'program',
      updateTime: 0,
      rankinglist: [],
      musiclistIds: [],
      num: 0
    }
  },
  methods: {
    typeChange (type) {
      this.type = type
      if (this.type === 'program') {
        this.getProgramRankingList()
      } else {
        this.getNewOrHotRankingList(this.type)
      }
    },
    getProgramRankingList () {
      getProgramRankingList().then(res => {
        // console.log(res.data)
        this.updateTime = res.data.updateTime
        this.rankinglist = res.data.toplist
        this.rankinglist.forEach(item => {
          item.num = this.num++
          this.musiclistIds.push(item.program.mainTrackId)
        })
        // console.log(this.rankinglist)
        // console.log(this.musiclistIds)
      })
    },
    getNewOrHotRankingList (type) {
      getNewOrHotRankingList(type).then(res => {
        // console.log(res.data)
        this.updateTime = res.data.updateTime
        this.rankinglist = res.data.toplist
        this.rankinglist.forEach(item => {
          item.num = this.num++
          this.musiclistIds.push(item.id)
        })
        // console.log(this.rankinglist)
      })
    },
    // 播放音乐
    playMuaic (row) {
      // console.log(row)
      if (this.type === 'program') {
        if (row.program.mainTrackId === null) return
        this.getMusicUrl(row.program.mainTrackId)
        this.getMusicMenu(row.program.mainTrackId)
        this.$store.commit('musicListIds', this.musiclistIds)
        this.$store.commit('musicIndex', row.num)
        this.$store.commit('setMusicCount', this.musiclistIds.length)
      } else {
        // 此接口返回的数据为空
        this.getMusicUrl(row.id)
        this.getMusicMenu(row.id)
      }
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data.songs[0])
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'MM-dd')
    }
  },
  created () {
    this.getProgramRankingList()
  }
}
</script>

<style lang="less" scoped>
  .ranking {
    width: 95%;
    margin: 20px auto;
    .label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-button-group {
        margin-left: 50%;
        transform: translate(-50%);
        .el-button {
          padding: 10px 25px;
        }
      }
      span {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        position: relative;
        img {
          width: 100%;
        }
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 25px;
          color: #fff;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
        i:hover {
          background: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
  .el-table {
    width: 100%;
    .ranknum {
      font-size: 15px;
      display: flex;
      justify-content: center;
    }
    .rank {
      display: flex;
      justify-content: center;
      font-size: 12px!important;
      i {
        font-size: inherit;
      }
    }
  }
</style>
